<template>
<div>
    <z-header></z-header>

    <!-- 购物车商品区域 -->
    <section class="shopcart-page">
        <div class="shopcart-list">
            <shopcart-box v-for="(item,index) in carList" :key="item.id" :car="item" :currentIndex='index' @delCar='removeCar'></shopcart-box>
        </div>
        <!-- 商品推荐区域 -->
        <div class="divider">
            <van-divider :style="{margin:0, borderColor: '#ccc', padding: '16px' }">可能你还想要</van-divider>
        </div>
        <!-- 推荐列表 -->
        <recommend></recommend>
        <!-- 提交订单区域 -->
        <van-submit-bar :price="allCountAndPrice.allPrice * 100" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked" checked-color="red" @click='valueChange'>全选</van-checkbox>{{$store.getters.isAllChecked}}
        </van-submit-bar>
    </section>

    <!-- 底部标签栏tabbar -->
    <tabbar></tabbar>
</div>
</template>

<script>
// 1. 导入tabbar子组件
import tabbar from "../../components/tabbar.vue";
import zHeader from "@/components/common/z-header";
import shopcartBox from "@/components/common/shopcart-box";
import recommend from "@/components/common/recommend";

import {
    mapState,
    mapGetters,
    mapMutations
} from 'vuex'

export default {
    data() {
        return {
            checked: false
        };
    },
    // 2. 将tabbar组件注册成为home的子组件
    components: {
        tabbar,
        zHeader,
        shopcartBox,
        recommend
    },
    watch: {
        // checked:function(){
        //     this.$store.commit('updateGoodsAllChecked',this.checked)
        // },
        isAllChecked: function () {
            this.checked = this.$store.getters.isAllChecked
        }
    },
    // 语法糖
    // computed:{
    //     allPrice(){
    //         return this.$store.getters.allCountAndPrice.allPrice * 100
    //     }
    // },
    // computed:mapGetters({
    //     obj:'allCountAndPrice'
    // }),
    computed:{
        ...mapState(['carList']),
        ...mapGetters(['allCountAndPrice','isAllChecked'])
    },
    // computed: mapGetters(['allCountAndPrice','isAllChecked']),
    methods: {
        ...mapMutations(['addCars']),
        valueChange() {
            this.$store.commit('updateGoodsAllChecked', !this.checked)
        },
        removeCar(id) {
            // 通过id找索引
            const index = this.carList.findIndex(v => v.id == id)

            this.carList.splice(index, 1)
        },
        onSubmit() {}
    }
};
</script>

<style lang="scss" scoped>
.shopcart-page {
    background: #f7f7f7;
    margin-top: 88px;

    .divider {
        background-color: #fff;
    }

    .recommend-list {
        margin-bottom: 100px;
    }
}

.van-submit-bar {
    bottom: 100px;
}
</style>
